技術選定の参考にbulletproof-reactを見てみる

React開発におけるベストプラクティスである、bulletproof-reactを紹介します。

bulletproof-reactはReactアプリ開発のベストプラクティスとして作られたリポジトリです。

Reactには多くのライブラリがあり便利ですが、その反面多過ぎてどのライブラリを利用するのが良いのか選定に悩む場合があります。また、Reactはディレクトリ構造など自由に作ることができ柔軟性があります。しかし、ある程度決められた構成が無いと、コードに一貫性が無くなったり、複雑で読みにくくなる場合があります。bulletproof-reactでは、パフォーマンスや保守性、拡張性を踏まえてどのようなプロジェクト構成が良いかを提案しています。もちろんあくまで参考程度であり、実際に採用するかは個人の判断になります。

・TypeScript (開発言語)

TypeScriptは静的型付け言語なのでエラーがあった場合は、コンパイル時に分かります。実行時のエラーを減らすことができコードの品質を高めることができます。

・ESLint (リンター)

ESLintは、静的コード解析ツールです。自分でコードの規約や構文エラーなどを定義でき、警告を出してくれるので一貫性のあるコードになります。

・Prettier (フォーマッター)

コードを自動で整形してくれるツールです。prettierの設定ファイル(.prettierrc)を作成しておくと、その設定に基づいてコードを整形してくれます。VSCode側で設定しておけば保存時に自動で整形してくれます。

・Husky (gitフック)

Huskyはgitフックを実行するツールです。git commitやgit pushした時にコードの検証、整形、テストの実行などを自動で行うことができます

・絶対パス

複雑なディレクトリ構成で相対パスを使ってimportを行うと、分かりづらいパス指定になる場合があります。またエイリアスを使った絶対パスだと、インポート元のファイルをどこに移動してもimport文を変更する必要がありません。

自分がReact開発するときもこれらのツールを使っています。ESLintについては既存プロジェクトに後から導入すると複数のエラーが出るので、プロジェクト作成時に導入します。以前Huskyを初めて使ったのですが、コミット前に未使用のimport文やconsole.logなど不要なコードを見つけてくれるので便利でした。

UIを作る際に、モーダルやメニューのUIを１から自分で作ると大変です。そういった場合にコンポーネントライブラリを使用すると簡単に実装できます。一方でコンポーネントライブラリは破壊的変更(ライブラリのアップデートにより、以前のコードのままだとエラーが発生すること)が出てきて保守の工数が増える可能性もあります。シンプルな画面の開発であれば、あまり使わない方がいいかもしれません。burretproofでは以下のようなコンポーネントライブラリが挙げられています。

ヘッドレスコンポーネントは、UIの要素やコンポーネントのロジックを提供するライブラリで、スタイルを持ちません。スタイルはtailwindなどを使って自分で指定する必要があります。これにより柔軟なスタイルを割り当てることができたり、コンポーネントの再利用性を高めることができます。

自分はヘッドレスコンポーネントを使ったことが無く、どういうものかも知りませんでした。ロジック部分のみを債務としたUIのようです。フレームワークへの依存性が少なくなるので、使用しているフレームワークで問題が起きた時に影響が少なかったり他のフレームワークへの移行がしやすいなどのメリットがあります。

Reactコンポーネントに対してスタイルを割り当てる際に使うCSSライブラリです。いっぱいあるのでどれを選んでいいのか迷いそうです。

• tailwind
• styled-components
• emotion
• stitches
• vanilla-extract
• CSS modules
• linaria

React Context/hooksはReactに組み込まれているため、追加のパッケージを必要としません。単にバケツリレーを避けるためだったり、比較的小さい規模のアプリ開発にはContext/hooksが向いています。

Reduxは初版が2015年と、他の状態管理ライブラリと比べて以前からあり広く利用されてきました。ダウンロード数が最も多く、検索しても多くの情報が出てきます。 またRedux toolkitを使うと、より効率的にReduxを扱うことができコード量を減らすことができます。

最近ではgithubのスターの増加数を見るとzustandが最もよく伸びていたり、ダウンロード数も2023年以降伸びてきています。もしかすると将来的にReduxを抜くかもしれません。

bulletproof-reactでは、他にもReactプロジェクトのフォルダ構成やテストライブラリ、デプロイ先のホスティングサービスについても紹介されているので、技術選定やReactプロジェクトを見直したい人はbulletproof-reactを見てみるといいと思います。